<template>
  <div class="content">
    <div class="login-content">
      <div class="login-logo">
        <i class="el-icon-edit"></i>
        <p>电子病历解析系统</p>
      </div>
      <div class="login-input-form">
        <el-form v-if="isOrigin" ref="loginForm">
          <el-input v-model="loginForm.username" placeholder="请输入用户名" class="login-input-form-frame"></el-input>
          <el-input v-model="loginForm.password" placeholder="请输入密码" show-password class="login-input-form-frame"></el-input>
          <el-button type="success" v-on:click="login" class="login-input-form-btn login-input-form-frame">登录</el-button><br/>
          <el-checkbox v-model="loginBySmsForm.checked">已阅读协议</el-checkbox>
          <el-button @click="goPrivate" type="text">《隐私协议》</el-button>
        </el-form>

        <el-form  v-else-if="!isOrigin && isOriginIndex == 1" ref="loginByEmail" >
          <div class ="login-email-form">
            <el-input v-model="loginByEmailForm.email" placeholder="请输入邮箱，支持qq邮箱" class="login-input-form" clearable></el-input>
            <div class="login-email-align">
              <el-input v-model="loginByEmailForm.authCode" placeholder="请输入验证码" class="login-authCode-form-frame" clearable></el-input>
              <el-button  v-on:click="sendCodeByEmail" class="login-send-authCode">{{ buttonText }}</el-button>
            </div>
            <el-button type="success" v-on:click="loginByEmail" class="login-authCode-btn login-input-form-frame">登录</el-button><br/>
            <el-checkbox v-model="loginBySmsForm.checked">已阅读协议</el-checkbox>
            <el-button @click="goPrivate" type="text">《隐私协议》</el-button>
            <div>
              <label class="login-hint">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;未注册的邮箱，登录时将自动注册</label>
              <p class="login-hint">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{ responseMessage }}</p>
            </div>
            <div>
              <el-button v-on:click="loginReturn" class="login-return-btn" round>返回</el-button>
            </div>
          </div>
        </el-form>

        <el-form  v-else-if="!isOrigin && isOriginIndex == 2" ref="loginBySms" >
          <div class ="login-sms-form">
            <el-input v-model="loginBySmsForm.phone" placeholder="请输入手机号(+86)" clearable></el-input>
            <div class="login-sms-align">
              <el-input v-model="loginBySmsForm.authCode" placeholder="请输入验证码" class="login-authCode-form-frame" clearable></el-input>
              <el-button  v-on:click="sendCodeBySms" class="login-send-authCode">{{ buttonText }}</el-button>
            </div>
            <el-button type="success" v-on:click="loginBySms" class="login-authCode-btn login-input-form-frame">登录</el-button><br/>
            <el-checkbox v-model="loginBySmsForm.checked">已阅读协议</el-checkbox>
            <el-button @click="goPrivate" type="text">《隐私协议》</el-button>
            <div>
              <label class="login-hint">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;未注册的手机号，登录时将自动注册</label>
              <p class="login-hint">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{ responseMessage }}</p>
            </div>
            <div>
              <el-button v-on:click="loginReturn" class="login-return-btn" round>返回</el-button>
            </div>
          </div>
        </el-form>

      </div>
      <div class="login-other-method">
        <el-form v-if="isOrigin" ref="otherLoginMethods">
          <p class="login-other-method-p">其他登录方式</p>
          <div class="login-other-method-way">
            <div class="login-other-method-way-item">
              <i class="el-icon-edit"></i>
              <span :class="isOriginIndex === 1 ? 'isMethod' : ''" @click="loginByEmailMethod">邮箱验证码登录</span>
            </div>
            <div class="login-other-method-way-item">
              <i class="el-icon-edit"></i>
              <span :class="isOriginIndex === 2 ? 'isMethod' : ''" @click="loginBySmsMethod">手机验证码登录</span>
            </div>
          </div>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
import jsCookie from 'js-cookie'
import res from 'autoprefixer'
export default {
  name: 'Login',
  data () {
    return {
      // 实现登录方式切换
      isOrigin: true,
      isOriginIndex: 0,

      // 实现验证码显示倒计时功能
      second: '',
      timer: null,
      disabled: false,

      // 储存后端响应数据,实现提示
      responseMessage: '',

      // 表单验证
      cap: 'captcha',

      loginForm: {
        username: '',
        password: '',
        checked: false
      },

      loginByEmailForm: {
        email: '',
        authCode: '',
        checked: false,
        select: '',
        rules: {
          email: [
            { required: true, message: '邮箱不可为空', trigger: 'blur' },
            { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
          ],
          password: [
            { required: true, message: '密码不可为空', trigger: 'blur' }
          ]
        }
      },

      loginBySmsForm: {
        phone: '',
        authCode: '',
        checked: false,
        select: ''
      },

      responseResult: []
    }
  },
  // 计算属性,实现倒计时60s功能
  computed: {
    buttonText () {
      return this.disabled ? `${this.second} s后重新发送` : `发送验证码`
    }
  },
  methods: {
    login () {
      this.$axios
        .post('/login', {
          id: this.loginForm.username,
          password: this.loginForm.password
        })
        .then(successResponse => {
          if (successResponse.data.code === 200) {
            this.$router.replace({path: '/index'})
            this.$message.success('登录成功！')
            jsCookie.set('username', res.data.id)
          }
        })
        .catch(failResponse => {
          this.$message.success('登录失败，请重试')
        })
    },
    goPrivate () {
      this.$router.replace({path: '/privateAgreement'})
    },
    loginByEmailMethod () {
      this.isOrigin = false
      this.isOriginIndex = 1
    },
    loginBySmsMethod () {
      this.isOrigin = false
      this.isOriginIndex = 2
    },
    loginReturn () {
      this.isOrigin = true
      this.isOriginIndex = 0
    },

    loginByEmail () {
      const email = this.loginByEmailForm.email
      const authCode = this.loginByEmailForm.authCode
      this.$axios
        .post('/emailLogin?authCode=' + authCode, {
          email: email
        })
        .then(response => {
          if (response.data.code === 200) {
            this.$router.replace({ path: '/index' })
            this.$message.success('登录成功！')
          } else {
            this.$message.error(response.data.message)
            this.$message.success('登录失败，请重试')
            this.getCaptcha()
          }
        })
    },

    loginBySms () {
      const phone = this.loginBySmsForm.phone
      const authCode = this.loginBySmsForm.authCode
      this.$axios
        .post('/smsLogin?authCode=' + authCode, {
          phone: phone
        })
        .then(response => {
          // 登录成功处理逻辑
          console.log(response.data)
          if (response.data.code === 200) {
            this.$router.replace({path: '/index'})
            this.$message.success('登录成功！')
          }
        })
        .catch(error => {
          // 登录失败处理逻辑
          console.error(error)
          this.responseMessage = '登录失败，请重试'
        })
    },

    sendCodeByEmail () {
      const email = this.loginByEmailForm.email
      this.$axios
        .get('/email?email=' + email)
        .then(response => {
          // 验证码发送成功处理逻辑
          console.log(response.data)
          console.log('点击')
          let that = this
          let s = 60
          if (!that.timer) {
            that.second = s
            that.disabled = true
            that.timer = setInterval(() => {
              if (that.second > 0 && this.second <= s) {
                that.second--
              } else {
                that.disabled = false
                clearInterval(that.timer)
                this.timer = null
              }
            }, 1000)
          }
          // 请求成功时判断业务状态码，并更新responseMessage变量
          if (response.data.code === 200) {
            this.$message.success('邮件发送成功，请注意查收')
          }
          if (response.data.code === 'isv.SMS_TEST_NUMBER_LIMIT') {
            this.responseMessage = '邮件发送失败，请重试'
          } else {
            this.responseMessage = ''// 其他业务状态码，清空错误信息
          }
        })
        .catch(error => {
          // 验证码发送失败处理逻辑
          console.error(error)
          this.responseMessage = '网络请求出错，请稍后再试'
        })
    },

    getCaptcha () {
      this.cap = 'captcha?x=' + Math.random()
    },

    sendCodeBySms () {
      const phone = this.loginBySmsForm.phone
      this.$axios
        .get('/sms', {
          params: {
            phone: phone
          }
        })
        .then(response => {
          // 验证码发送成功处理逻辑
          console.log(response.data)
          this.$message.success('短信发送成功，请注意查收')
          console.log('点击')
          let that = this
          let s = 60
          if (!that.timer) {
            that.second = s
            that.disabled = true
            that.timer = setInterval(() => {
              if (that.second > 0 && this.second <= s) {
                that.second--
              } else {
                that.disabled = false
                clearInterval(that.timer)
                this.timer = null
              }
            }, 1000)
          }
          // 请求成功时判断业务状态码，并更新responseMessage变量
          if (response.data.code === 'isv.SMS_TEST_NUMBER_LIMIT') {
            this.responseMessage = '验证码发送失败'
          } else {
            this.responseMessage = '欢迎注册！'// 其他业务状态码，清空错误信息
          }
        })
        .catch(error => {
          // 验证码发送失败处理逻辑
          console.error(error)
          this.responseMessage = '网络请求出错，请稍后再试'
        })
    }
  }}
</script>

<style scoped>

.content {
  min-height:800px;
  /*backgroud:url("../assets/img/bg/login.jpg") no-repeat;*/
  background-image: url("../assets/img/bg/login.jpg");
  /*background-color: #ace8e7;*/
  display: flex;
  flex-direction: row;
  justify-content: right;
  align-items: center;
  padding-right: 100px;
}

.login-content {
  background-color: white;
  width: 300px;
  border-radius: 10px;
  box-shadow: 0 0 15px 5px #42b983;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.login-logo {
  margin-top: 20px;
  color: #38c0aa;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.login-input-form {
  width: 90%;
}

.login-input-form-frame {
  margin-bottom: 20px;
}

.login-email-form{
  width: 100%;
  padding-bottom: 30px;
  margin-top: 20px;
}

.login-sms-form{
  width: 100%;
  padding-bottom: 30px;
}

.login-email-align {
  vertical-align: baseline;
  font-size:0;
}

.login-sms-align {
  vertical-align: baseline;
  font-size:0;
}

.login-send-authCode {
  background-color: #38c0aa;
  width: 50%;
}

.login-authCode-form-frame {
  margin-bottom: 20px;
  width:50%;
  padding-top: 15px;
}

.login-authCode-btn{
  background-color: #38c0aa;
  width: 100%;
  margin-left: auto;
}

.login-input-form-btn {
  background-color: #38c0aa;
  width: 100%;
}

.login-hint {
  padding-top: 10px;
  font-size: 14px;
}

.login-return-btn {
  background-color: #38c0aa;
  width: 50%;
  margin-left: 135px;
  margin-top:30px;
}

.login-other-method {
  font-size: 12px;
}

.login-other-method-p {
  margin-left: 8px;
}

.login-other-method-way {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.login-other-method-way-item {
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  /*margin-right: 30px;*/
  padding: 20px;
}

.isMethod{
  color: #38c0aa;
}
</style>
